# Usage
Evergreen exports two components to create text alerts:
- **Alert**: alert component with icon, title and optional description.
- **InlineAlert**: alert component with icon and title.

<br />

## Intent API

Both the Alert and the InlineAlert components implement the `intent` prop.
The `intent` is a interface used across Evergreen and has the following options:
- **info**: `intent="none"`
- **success**: `intent="success"`
- **warning**: `intent="warning"`
- **danger**: `intent="danger"`

<br />
<br />

# Alert

The Alert component can have a `title` and `children`.
There are props to configure the icon and the border on the left.

```jsx
<Pane>
  <Alert
    intent="none"
    title="There are over 200 integrations available"
    marginBottom={32}
  />
  <Alert
    intent="success"
    title="Your source is now sending data"
    marginBottom={32}
  />
  <Alert
    intent="warning"
    title="Changes will affect all warehouses"
    marginBottom={32}
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed dod eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </Alert>
  <Alert intent="danger" 
    title="We weren’t able to save your changes"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed dod eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </Alert>
</Pane>
```

<br />

# InlineAlert

The `InlineAlert` is useful when not showing a title and space is limited.

```jsx
<Pane>
  <InlineAlert intent="none" marginBottom={16}>
    There are over 200 integrations available
  </InlineAlert>
  <InlineAlert intent="success" marginBottom={16}>
    Your source is now sending data
  </InlineAlert>
  <InlineAlert intent="warning" marginBottom={16}>
    Changes will affect all warehouses
  </InlineAlert>
  <InlineAlert intent="danger">
    We weren’t able to save your changes
  </InlineAlert>
</Pane>
```
